<template>
	<view class="st-flexible-box" v-if="!isHide">
		<image 
		:class="{'st-flexible-box__img': true, 'retract': isRetract}"
		:src="
		'https://static.member.stourweb.cn/uniapp/static/images/' + 
		(isRetract ? 'wechat_mini_customer_guide.png' : 'wechat_customer_guide.png')" 
		 @click="onclick"
		mode="scaleToFill">
		</image>
		<uni-popup ref="popup" zIndexMax type="bottom">
			<view class="popup-container">
				<view class="popup-bar">
					<view class="tit">专属旅行顾问</view>
					<view class="txt">长按识别二维码，添加专属旅行顾问</view>
					<view class="close" @click="close"><text class="iconfont">&#xe61a;</text></view>
				</view>
				<view class="popup-content">
					<image class="popup-content__img" show-menu-by-longpress :src="imageUrl" mode="scaleToFill"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * 微信客服引导图
	 * @description 展示的企业微信广告图、滚动自动收起展开
	 * @property {Boolean} isRetract 默认展示状态
	 * @event {Function()} onclick 打开展示弹层
	 * @event {Function()} close 关闭展示弹层
	 */
	export default {
		name:"st-banner-flexible",
		props: {
			isRetract: {
				type: Boolean,
				default: false
			},
			type_id: {
				type: [String, Number],
				default: 1
			}
		},
		created() {
			this.getImage()
		},
		data() {
			return {
				isHide: true,
				imageUrl: ''
			};
		},
		methods: {
			// 打开弹层
			onclick(){
				this.$refs.popup.open()
			},
			
			// 关闭弹层
			close(){
				this.$refs.popup.close()
			},
			// 获取二维码
			async getImage(){
				let res, params = {
					method: 'api/v2/system/consulting',
					type_id: this.type_id
				}
				res = await this.$http(params)
				if(res.status){
					const {is_open, qr_code} = res.data
					if(is_open > 0){
						this.isHide = false
					}else{
						this.isHide = true
					}
					this.imageUrl = qr_code
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.st-flexible-box{
	
	&__img{
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx;
		&.retract{
			height: 80rpx;
		}
	}
}

.popup-container{
	border-radius: 24rpx 24rpx 0 0;
	background: #fff;
	.popup-bar{
		padding: 40rpx 0 0;
		text-align: center;
		position: relative;
		.tit{
			font-size: 32rpx;
			font-weight: bold;
		}
		.txt{
			color: #999;
			margin-top: 20rpx;
			font-size: 28rpx
		}
		.close{
			position: absolute;
			right: 24rpx;
			top: 30rpx;
			.iconfont{
				color: #ccc;
				font-size: 40rpx
			}
		}
	}
	.popup-content{
		padding: 80rpx 0 120rpx;
		text-align: center;
		&__img{
			width: 284rpx;
			height: 284rpx;
		}
	}
}
</style>